<template>
  <div class="list-content">
    <div v-show="!dialogFalgPage">
      <el-row type="flex" justify="space-between">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
          <el-form-item>
            <el-input 
            v-model.trim="formInline.name" 
            placeholder="版本名称"
            @keyup.enter.native="getList(1)"
            clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input 
            v-model.trim="formInline.version" 
            placeholder="版本号"
            @keyup.enter.native="getList(1)"
            clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="getList(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="more-btns">
          <el-button type="primary" @click="add()">新增</el-button>
        </div>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        ref="mainTable"
        style="width: 100%">
        <el-table-column
        label="序号"
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="版本名称">
        </el-table-column>
        <el-table-column
          prop="version"
          label="版本号">
        </el-table-column>
        <el-table-column
        prop="url"
        label="文件地址">
        </el-table-column>
        <el-table-column
        prop="usage"
        label="使用数目">
        </el-table-column>
        <el-table-column
        prop="description"
        label="描述">
        </el-table-column>
        <el-table-column
        prop="remarks"
        label="备注">
        </el-table-column>
        <el-table-column 
        label="操作">
          <template slot-scope="scope">
            <el-button  @click="showDetail(scope.$index, scope.row)" type="text" size="small">详情</el-button>
            <span class="dividing-line">|</span>
            <el-button  @click="add(scope.row)" type="text" size="small">编辑</el-button>
            <span class="dividing-line">|</span>
            <el-button  @click="del(scope.row)" type="text" size="small">删除</el-button>
            <span class="dividing-line">|</span>
            <el-button  @click="showUpgradeDialog(scope.row)" type="text" size="small">升级</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="formInline.currentPageIndex"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formInline.currentPageTotal">
      </el-pagination>
      <el-dialog
          :close-on-click-modal="false"
          :title="(editInfo.id?'编辑':'添加')+'通讯服务器记录'"
          width="600px"
          top='10vh'
          v-if="dialogFalg"
          :visible.sync="dialogFalg"
          v-dialogDrag
          @close="closeDialog">
          <edit-form :editInfo="editInfo" :closeDialog="closeDialog"></edit-form>
      </el-dialog>
      <!-- 升级 -->
       <el-dialog
          :close-on-click-modal="false"
          title="升级"
          width="600px"
          top='10vh'
          v-if="dialogUpgrade"
          :visible.sync="dialogUpgrade"
          v-dialogDrag
          @close="closeDialogUpgrade">
          <up-form :editInfo="upInfo" :closeDialog="closeDialogUpgrade"></up-form>
      </el-dialog>
    </div>
    <!-- 通信服务器维护列表 -->
    <transition name="el-zoom-in-top">
      <list 
        v-if="dialogFalgPage" 
        :pageInfo="moreInfo" 
        :hasFather="hasFather" 
        :backFather="backFather"></list>
    </transition>
  </div>
</template>

<script>

import List from './Pagemodel/PlatTransDeviceList'
import EditForm from './Dialog/PlatTransDeviceForm'
import UpForm from './Dialog/PlatTransDeviceUpgradeForm'
import util from '@/utils/util'
import { getServerList,delServer} from '@/api/dcx'

export default {
  name: 'PlatTransDevice',
  components: {
     List,
     EditForm,
     UpForm
  },
  data () {
    return {
      formInline: {
        name: '',
        version: '',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      tableData: [],//表格数据
      dialogFalg: false,//编辑弹窗
      dialogFalgPage: false,//详情列表
      dialogUpgrade: false,//升级弹窗
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      loading: false,
      editInfo: {  },// 编辑对应的表单信息
      upInfo: {  },// 升级
      moreInfo: {  },// 通信服务器维护列表
      hasFather:true
    }
  },
  created:function() {
    
    this.getList()
  },
  methods: {
    sizeChange(val) {//页码切换
      this.formInline.currentPageIndex = 1;
      this.formInline.currentPageSize = val;
      this.getList() 
    },
    pageChange(val) {//翻页
      this.formInline.currentPageIndex = val;
      this.getList() 
    },
    getList(_pageIndex) {//获取列表
      if(_pageIndex){
        this.formInline.currentPageIndex = _pageIndex
      }
      this.loading =true;
      getServerList({
        pageIndex: this.formInline.currentPageIndex -1,
        pageSize: this.formInline.currentPageSize,
        name: this.formInline.name.trim(),
        version: this.formInline.version.trim(),
      }).then((result) => {
        this.formInline.currentPageTotal = result.total;
        this.tableData = result.data;
        this.loading =false;
      }) 
    },
    /*新增和编辑*/
    add(row){
      this.dialogFalg = true
      this.editInfo = row||{}
    },
    closeDialog(refresh) {
      this.dialogFalg = false
      if(refresh) {
        this.getList(1)
      }
    },
    /*升级*/
    showUpgradeDialog(row){
      this.dialogUpgrade = true
      this.upInfo = row||{}
    },
    closeDialogUpgrade(refresh){
      this.dialogUpgrade = false
      if(refresh) {
        this.getList(this.editInfo.id?'':1)
      }
    },
    del(row){
      let that = this
      if (row) {
        that.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          roundButton: true
        }).then(() => {
          delServer({id: row.id}).then(res => {
            if( res.status === 200) {
              that.$message({
                type: 'success',
                message: '操作成功!'
              })
              that.getList(1) 
            }else{
              that.$message.error(res.info)
            }
          })
        }).catch(() => {
        })
      }
    },
    showDetail(index, row) {//展开【通信服务器维护】详情
      this.dialogFalgPage = true
      this.moreInfo = row||{}
    },
    backFather() {
      this.dialogFalgPage = false
      this.getList(1)
    }
  }
}

</script>

<style></style>